<template>
  <div>
    <div class="title">
      <span>货单统计详情</span>
      <div>
          <el-button type="primary" :disabled="exxxx" @click="maniexcelByDate">
              <i class="el-icon-download"></i>导出
          </el-button>
          <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>

    <div class="container">
      <!-- 表格板块 -->
    <div class="tableBox">
        <el-table
            ref="multipleTable"
            :data="yztData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            stripe
            :loading="loading"
            :header-cell-style="tableHeaderColor">
        <el-table-column type="selection" width="55"></el-table-column>
     
        <el-table-column
            prop="tradeDate"
            label="时间"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="merchantNo"
            label="商户号"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="merchantName"
            label="商户名"
            align="center"
        ></el-table-column>
        <el-table-column
          prop="totalAmount"
          label="应付货单金额"
          align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.totalAmount / 100 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="paidAmount"
          label="已付货单金额"
          align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.paidAmount / 100 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="payableAmount"
          label="未付货单金额"
          align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.payableAmount / 100 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="splitAmount"
          label="分账金额"
          align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.splitAmount / 100 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="fee"
          label="手续费金额"
          align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.fee / 100 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="balace"
          label="应结算金额"
          align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.balace / 100 }}
            </div>
          </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
    <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="sizechange"
        :page-sizes="[10,20,30,40,50]"
        :page-size='cur_size'
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
    </div>
    </div>
    </div>
  </div>
</template>

<script>
import { maniCountByDate, maniexcelByDay } from "@/api/yztmanage/yztmanage";
export default {
  name: 'manidetail',

  data() {
    return {
      id: '',
      cur_page: 1,
      cur_size: 10,
      total: 0,
      yztData: [],
      date: [],
      loading: false,
      exxxx: false,
      info: {}
    };
  },

  created() {
    this.getManiCount()
  },

  watch: {
    // 监听路由传参变化
    async $route(item) {
      if(item.path == '/manidetail') {
        this.loading = true
        let info = JSON.parse(item.query.info)
        let res = await maniCountByDate({
        page: this.cur_page,
        size: this.cur_size,
        startDate: info.startDate,
        endDate: info.endDate,
        merchantName: info.merchantName || '',
        merchantNo: info.merchantNo || '',
        merchantId: info.id,
      })
      if(res.code == 405) {
        localStorage.removeItem('token')
        this.$router.push('/login');
        this.loading = false
      } else {
        if(res.code == 200) {
          this.yztData = res.data.data
          this.total = res.data.pageInfo.recordCount
          this.cur_page = res.data.pageInfo.pageCurrent
          this.cur_size = res.data.pageInfo.pageSize
          this.loading = false
        } else {
          this.$message.error(res.message)
          this.loading = false
        }
      }
      }
    }
  },

  methods: {
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
        }
    },
    // 分页导航
    handleCurrentChange(val) {
        this.cur_page = val;
        this.$nextTick(() => {
            document.querySelectorAll(".content")[0].scrollTop = "0";
        });
    },
    // 分页数量
    sizechange(val) {
        this.cur_size = val;
        this.$nextTick(() => {
            document.querySelectorAll(".content")[0].scrollTop = "0";
        });
    },
    //多选框
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },

    // 刷新
    refresh() {
      this.getManiCount()
    },

    // 查询货单统计（按日期）
    async getManiCount() {
      this.loading = true
      let info = JSON.parse(this.$route.query.info)
      let res = await maniCountByDate({
        page: this.cur_page,
        size: this.cur_size,
        startDate: info.startDate,
        endDate: info.endDate,
        merchantName: info.merchantName || '',
        merchantNo: info.merchantNo || '',
        merchantId: info.id,
      })
      if(res.code == 405) {
        localStorage.removeItem('token')
        this.$router.push('/login');
        this.loading = false
      } else {
        if(res.code == 200) {
          this.yztData = res.data.data
          this.total = res.data.pageInfo.recordCount
          this.cur_page = res.data.pageInfo.pageCurrent
          this.cur_size = res.data.pageInfo.pageSize
          this.loading = false
        } else {
          this.$message.error(res.message)
          this.loading = false
        }
      }
    },

    // 按日期导出
    async maniexcelByDate() {
      let info = JSON.parse(this.$route.query.info)
      let res = await maniexcelByDay({
        page: this.cur_page,
        size: this.cur_size,
        startDate: info.startDate,
        endDate: info.endDate,
        merchantName: info.merchantName || '',
        merchantNo: info.merchantNo || '',
        merchantId: info.id,
      })
      this.exxxx = true;
      let i = 0;
      let time = setInterval(() => {
        if (i == 60) {
          loading.close();
          this.$message.error("请求超时");
          clearInterval(time);
        } else {
          i++;
        }
      }, 1000);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if(res.data.code == 405) {
        clearInterval(time);
        localStorage.removeItem('token')
        this.$router.push('/login');
        loading.close();
        this.exxxx = false;
      } else {
        if(res.data.code == 200) {
          clearInterval(time);
          let elink = document.createElement("a");
          elink.download = "一账通对账单.xls";
          elink.href = res.data.data;
          elink.click();
          loading.close();
          this.exxxx = false;
        } else {
          clearInterval(time);
          this.$message.error(res.data.message);
          loading.close();
          this.exxxx = false;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .itemBox {
  width: 50%;
}
.container .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container .itemBox .line div:nth-child(1) {
  width: 20%;
  text-align: left;
}
.container .itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .attachmentitem {
    width: 16.5%;
    text-align: center;
    margin-bottom: 20px;
    div {
      font-size: 14px;
      &:nth-child(1) {
        margin-bottom: 5px;
      }
    }
  }
  .tableBox{
    width: 100%;
    margin-top: 20px;
  }
  .splitBox {
    width: 100%;
    margin: 20px 0 10px 0;
  }
  // /deep/.feeMerchant .el-table__row {
  //   cursor: pointer;
  // }
}
</style>